<script setup lang="ts">
import {ref, watchEffect} from 'vue';

const title = ref('默认标题');
const props = defineProps({
  title : {
    type: String,
    default: '默认标题'
  }
});
watchEffect(() => {
  if (props.title) {
    title.value = props.title;
  }
});

</script>

<template>
  <div class="wrapper">
    <div class="title">{{ title }}</div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
.wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid #1FC6FF;
  border-top: none;
  .title {
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    background-image: url(../assets/title-bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-weight: bold;
    font-size: 20px;
  }
  .content {
    padding: 10px;
  }
}
</style>